<script>
export default {
  name: 'DynTable',
  props: {
    tableData: {
      type: Array,
      default: () => ([])
    },
    tableColumns: {
      type: Array,
      default: () => ([])
    },
    handleSelectionChange: {
      type: Function,
      default: () => { }
    },
    rowClick: {
      type: Function,
      default: () => { }
    },
    loading: {
      type: Boolean,
      default: true
    },
    headerStyle: {
      type: Object,
      default: () => ({ background: '#F2F6FC', color: '#606266' })
    },
    isTree: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
    }
  },
  methods: {
    load() {}
  },
  render: function(h) {
    return (
      <el-table
        ref='multipleTable'
        data={ this.tableData }
        header-cell-style={this.headerStyle}
        border
        stripe
        tooltip-effect='dark'
        fit
        // {...this.isTree}
        row-key={this.isTree.rowKey}
        lazy={this.isTree.lazy}
        load={ this.isTree.load }
        tree-props={this.isTree.treeProps}
        highlight-current-row
        on-selection-change={this.handleSelectionChange}
        on-row-click={this.rowClick}
        v-loading={this.loading}
        style='width: 100%'>
        { this.tableColumns.map((item, index) => {
          return <el-table-column
            key={index}
            width={item.width}
            align={item.align ? item.align : 'center'}
            header-align={item.headerAlign ? item.headerAlign : 'center'}
            show-overflow-tooltip={true}
            prop={item.prop}
            label={item.label}
            type={item.type}
            fixed={item.fixed}
            sortable={item.sortable}
            filters={item.filters ? item.filters(item, this) : undefined}
            filter-method={item.filterMethod}
            // scopedSlots={{
            //   header: ({ column, $index }) => {
            //     column.minWidth = (column.label.length + 1) * 14
            //     return <div>{column.label}</div>
            //   }
            // }}
          >
            {item.templete ? scope => item.templete(scope, this) : null }
          </el-table-column>
        }) }
      </el-table>
    )
  }
}
</script>
